<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 层叠性 -->
    相同的属性命令有变化,取最近的
    <!-- 继承性 -->
    在自己本身未加属性的情况下,会继承父级的属性,但是权重会为零
    <!-- 权重 -->
    在加过属性的不同命令中,按权重计算哪个生效,
    (0.0.0.0) 优先度为 行内元素 >id >类class >标签> 自己的属性> 继承>
    权重高的才会生效,权重低的会被覆盖,(行内样式.id.class.标签) 通配符 浏览器默认 继承 */
    !important,权重无限大
    <!-- 边框 -->
    border-top: 2px red solid;
    实线 solid实线
    虚线 dashed虚线
    点线 dotted点线
    <!-- 内边距 -->
    padding:20px 代表盒子内边距向内 四个方向 收缩20px
    不同的方向:上top 右 right 下bottom 左left
    <!-- 外边距 -->
    margin:20px 代表盒子外边距向外 四个方向 撑大20px
    auto可以让左右填充满 例: margin:0 auto;
    外边距上下使用margin,外边距不会相加,会取最大值
    外边距左右不会取最大值,会相加
    <!-- 塌陷问题 -->
    overfloe:hidden（也可以用作溢出隐藏）
    当块级元素嵌套关系时,给子元素设margin-top,会带着父元素一起下降,这时候可以给父元素设置 overfloe:hidden
    <!-- 盒子阴影 -->
    box-shadow: 13px 15px 17px 2px rgb(0 0 0 / 50%);
    box-shadow: x位置 y位置 模糊度 阴影尺寸 阴影颜色
    <!-- 圆角 -->
    border-radius: 20px;
    border-radius: 20px;是倒圆角, 20就是半径
</body>

</html>